<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    mounted(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        this.setEcharts();
    },
    methods:{
        setEcharts(data){ //绘制图表
            this.myChart.setOption({
                title: { //图表的标题
                text: '最近7天的访问量',
                left: 'center'
                },
                legend:{ //显示图例
                top: 30
                },
                tooltip: {}, //悬浮提示
                xAxis: { //图表的水平坐标(刻度)
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {}, //图表的水平坐标(刻度)
                series: [ //数据系列
                {
                    name: '销量',
                    label: { show: true,position:'top' },
                    type: 'bar', //图表的类型 , line 折线图
                    data: [5, 20, 36, 40, 30, 20]
                },
                {
                    name: '访问量',
                    label: { show: true,position:'top' },
                    type: 'bar', //图表的类型, bar 柱状图
                    data: [5, 40, 46, 8, 15, 60]
                }
                ]
            });
        },
    }

}
</script>

<style lang="scss" scoped>
#main{
    width: 100%;
    height:500px;
}
</style>